<template>
	<view class="box">
		<view class="ShopDetailsBox">
			<cu-custom :isBack="true" bgColor="HomePageStyle" fhColor="#000" textColor="#000">
				<block slot="content">商品详情</block>
			</cu-custom>
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="Swiper">
				<swiper-item v-for="(item, index) in GoodsDetails.goodsDetailImage" :key="index" class="SwiperItem">
					<image :src="item" mode="heightFix" class="SwiperItemImage"></image>
				</swiper-item>
			</swiper>
			<view class="GoodsInformation">
				<view class="GoodsName">
					{{ GoodsDetails.goodsName }}
					<view class="">/{{GoodsDetails.goodsSpecification}}</view>
				</view>
				<view class="GoodsPrice">
					<view class="RMB"> ￥ </view>
					<view class="Price">
						{{ GoodsDetails.goodsPrice }}
					</view>
				</view>
			</view>

			<view class="GoodsDetails" v-if="GoodsDetails.remark">
				<view class="Title">
					商品详情
				</view>
				<view class="Content">
					<u-parse :content="GoodsDetails.remark" @navigate="navigate" v-if="GoodsDetails.remark"></u-parse>
				</view>
			</view>
			<view class="GoodsDetails" v-else>
				暂无数据
			</view>
			<view class="Block">

			</view>

			<view class="AddToShopCartBtn">
				<view class="Btn" @click="AddToShopCart"> 加入购物车 </view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Base64
	} from '../../static/lib/base64.js'
	import uParse from "../../components/feng-parse/parse.vue"
	export default {
		data() {
			return {
				goodsCode: "",

				GoodsDetails: {},
			};
		},
		components: {
			uParse
		},
		onLoad(option) {
			console.log(option, "options");
			this.goodsCode = option.id;
			this.getData();
		},
		methods: {
			async getData() {
				const url = "/app/goods/goods_detail";
				const res = await this.$http.get(url, {
					goodsCode: this.goodsCode,
				});
				this.GoodsDetails = res.data.data;
				this.GoodsDetails.remark = Base64.decode(this.GoodsDetails.remark)
				this.GoodsDetails.remark = this.GoodsDetails.remark.replace(/\"/g, "'")
				console.log(res, "商品详情");
			},
			async getPlaceAnOrderStatus() {
				const res = await this.$http.get("/app/book_order/getBookStatus");
				// console.log(res, '订货状态');
				return res.data.data;
			},
			async AddToShopCart() {
				if (this.GoodsDetails.goodsStock !== 0) {
					const result = await this.getPlaceAnOrderStatus();
					let goodsNum = 1;
					if (result.auditStatus == 1) {
						const url = this.api.shopCart.AddToShopCart;
						const res = await this.$http.post(url, {
							goodCode: this.goodsCode,
							goodsNum: goodsNum,
						});
						if (res.data.code === 200) {
							uni.showToast({
								title: "加入成功",
							});
						}
						if (res.data.code === 500) {
							uni.showToast({
								title: '商品库存不足',
								icon: 'error'
							})
						}
						console.log(res, "加入购物车");
					} else {
						uni.showToast({
							title: "订货申请审核通过后才可下单",
							icon: "none",
						});
					}
				} else {
					uni.showToast({
						title: '库存不足',
						icon: 'error'
					})
				}

			},
		},
	};
</script>

<style lang="scss" scoped>
	.box {
		.Swiper {
			width: 100%;
			height: 752rpx;

			.SwiperItem {
				width: 750rpx;
				height: 752rpx;

				.SwiperItemImage {
					width: 750rpx !important;
					height: 752rpx !important;
				}
			}
		}

		.GoodsInformation {
			width: 702rpx;
			height: 226rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 10rpx 20rpx 2rpx rgba(0, 0, 0, 0.05);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			margin-left: 20rpx;
			margin-top: 50rpx;
			padding: 40rpx 166rpx 30rpx 32rpx;

			.GoodsName {
				color: #1B1B2A;
				font-size: 36rpx;
				display: flex;
				align-items: baseline;

				view {
					font-size: 25rpx;
					color: gray;
					margin-left: 10rpx;
				}
			}

			.GoodsPrice {
				display: flex;
				align-items: center;
				color: #E34949;
				margin-top: 40rpx;

				.RMB {
					padding-top: 10rpx;
					font-size: 22rpx;
					margin-right: 12rpx;
				}

				.Price {
					font-size: 32rpx;
				}
			}
		}

		.GoodsDetails {
			width: 702rpx;
			text-align: center;
			margin-left: 20rpx;
			margin-top: 50rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			box-shadow: 0rpx 10rpx 20rpx 2rpx rgba(0, 0, 0, 0.05);
			padding: 20rpx 50rpx;
			margin-bottom: 100rpx;

			.Title {
				width: 100%;
				font-size: 32rpx;
				font-weight: 700;
				text-align: center;
				// margin-bottom: 50rpx;
			}

			.Content {
				// padding: 150rpx 50rpx 150rpx 50rpx;
			}
		}

		.Block {
			width: 100%;
			height: 100rpx;
		}

		.AddToShopCartBtn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 124rpx;
			background-color: #FFFFFF;
			box-shadow: 0rpx -2rpx 12rpx 2rpx rgba(138, 138, 138, 0.16);
			display: flex;justify-content: center;

			.Btn {
				width: 476rpx;
				height: 74rpx;
				background: #386AF6;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				opacity: 1;
				line-height: 74rpx;
				text-align: center;
				color: #FFFFFF;
				margin-top: 20rpx;
			}
		}
	}
</style>